<template>
  <div class="app">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="box" v-for="(item,index) in shop_list" :key="index" @click="toTetail(item)">
      <img :src="item.picUrl" alt="">
      <div class="text">
          <h4>{{item.name}}</h4>
          <div class="tet">
                <p><span>☆4.3</span> <span>{{item.monthSalesTip}}</span></p>
          </div>
          
          <div class="txt">
              <p><span>{{item.minPriceTip}}</span><span>{{item.shippingFeeTip}}</span></p>
              <p><span>{{item.deliveryTimeTip}}</span><span>{{item.distance}}</span></p>
          </div>
          
      </div>
    </div>
    <Footer>
      <template>
        <div class="click">点击这里去<span class="route" @click="handleClilk"> 逛一逛。</span></div>
      </template>
    </Footer>
    
  </div>
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
  data(){
        return{
            shop_list:[],
        }
  },
  components:{
      Footer,
  },
  mounted(){
  this.shop_list=this.$store.state.collectList 
  console.log(this.shop_list)
  },
  methods:{     
      onClickLeft(){
        this.$router.go(-1)
      },
      toTetail(item){
        this.$router.push('/detail/'+item.mtWmPoiId)
      },
      handleClilk(){
        this.$router.push('/index')
      }
  }
}
</script>

<style lang="scss" scoped>
.box{
    display: flex;
    padding: 0 10px;
    margin-top: 10px;
    img{
        width: 90px;
        height: 90px;
        margin-right: 10px;
    }
    .text{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .txt{
        display: flex;
        justify-content:space-between;
        color: gray;
        font-size: 14px;
    }
        .tet p span:first-child{
            color: orangered;
        }
    } 
}
.click{
  line-height: 20px;
  .route{
  color: rgb(57, 169, 214);
  }
}

</style>